<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-date-picker v-model="whereQuery.dateRange" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" @change="handleFilter" end-placeholder="结束日期" :picker-options="pickerOptions">
      </el-date-picker>
      <el-input @keyup.enter.native="handleFilter" style="width: 150px;" placeholder="名称" v-model="whereQuery.name"></el-input>
      <el-select v-model="whereQuery.did" clearable filterable remote placeholder="请输入设备编号" :remote-method="remoteMethod" @change="handleFilter" :loading="deviceLoading">
        <el-option v-for="item in deviceOptions" :key="item.id" :label="item.number" :value="item.id">
        </el-option>
      </el-select>
      <el-select clearable style="width: 120px" v-model="whereQuery.status" placeholder="状态" @change="handleFilter">
        <el-option v-for="item in statusOptions" :key="item" :label="item | statusFilter" :value="item">
        </el-option>
      </el-select>
      <el-select @change='handleFilter' style="width: 150px" v-model="whereQuery.sortType" placeholder="排序">
        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key">
        </el-option>
      </el-select>
      <el-button type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
              style="width: 100%">
      <el-table-column min-width="140px" header-align="center" align="center" label="设备编号">
        <template slot-scope="scope">
          <span class="link-type" style="font-family: Menlo, Monaco, Consolas, Courier New, monospace;" @click="showJsonObject(scope.row.device)">{{scope.row.device.number}}</span>
        </template>
      </el-table-column>
      <el-table-column label="分发名称" header-align="center" min-width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="link-type" style="font-family: Menlo, Monaco, Consolas, Courier New, monospace;" @click="showJsonObject(scope.row.distribution)">{{scope.row.distribution.name}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="80px" header-align="center" align="center" label='状态'>
        <template slot-scope="scope">
          <span>{{scope.row.distribution.status | statusFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="120px" header-align="center" label="设备点击次数">
        <template slot-scope="scope">
          <span>{{scope.row.motionCount}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="120px" header-align="center" label="应用打开次数">
        <template slot-scope="scope">
          <span>{{scope.row.appOpenCount}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="80" class-name="small-padding" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="showDetail(scope.row)">更多</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :page-sizes="[30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <el-dialog title="对象" :visible.sync="jsonVisible">
      <el-form label-position="right" style='min-width: 600px;'>
        <el-form-item>
          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 27}" v-model="jsonObject">
          </el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import { listBehavior, listDevice } from '@/api/monitor'
  import waves from '@/directive/waves'

  export default {
    name: 'behavior',
    directives: {
      waves
    },
    data() {
      return {
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          page: 0,
          size: 30,
          did: undefined,
          status: undefined,
          sortType: 1,
          start: 1527793341000,
          end: 1529002941000,
          name: undefined
        },
        whereQuery: {
          did: undefined,
          status: undefined,
          name: undefined,
          sortType: 1,
          dateRange: []
        },
        listDeviceQuery: {
          page: 0,
          size: 10,
          number: undefined
        },
        sortOptions: [{ label: '按点击次数倒序', key: 1 }, { label: '按点击次数正序', key: 2 }, { label: '按打开次数倒序', key: 3 }, { label: '按打开次数正序', key: 4 }],
        deviceOptions: [],
        statusOptions: [1, 2, 3, 4],
        dialogFormVisible: false,
        jsonVisible: false,
        deviceLoading: false,
        jsonObject: undefined,
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > (Date.now() - 24 * 3600 * 1000)
          },
          shortcuts: [{
            text: '过去七天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              end.setTime(end.getTime() - 3600 * 1000 * 24)
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '过去30天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              end.setTime(end.getTime() - 3600 * 1000 * 24)
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '过去90天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              end.setTime(end.getTime() - 3600 * 1000 * 24)
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        }
      }
    },
    filters: {
      json: (value) => { return JSON.stringify(value, null, 2) },
      statusFilter(stauts) {
        const statusList = ['待发出', '已发出', '已激活', '已收回']
        return stauts > 0 ? statusList[stauts - 1] : ''
      }
    },
    created() {
      const end = new Date()
      const start = new Date()
      end.setTime(end.getTime() - end.getTime() % (3600 * 1000 * 24) - 32 * 3600 * 1000)
      start.setTime(end.getTime() - 3600 * 1000 * 24 * 6)
      this.whereQuery.dateRange.push(start)
      this.whereQuery.dateRange.push(end)
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        this.listQuery.name = this.whereQuery.name
        this.listQuery.did = this.whereQuery.did
        if (this.whereQuery.status !== undefined) {
          this.listQuery.status = this.whereQuery.status
        }
        this.listQuery.sortType = this.whereQuery.sortType
        if (this.whereQuery.dateRange !== null) {
          this.listQuery.start = this.whereQuery.dateRange[0].getTime()
          this.listQuery.end = this.whereQuery.dateRange[1].getTime() + 3600 * 1000 * 24 -1
        }
        listBehavior(this.listQuery).then(response => {
          this.list = response.data.data.result
          this.total = response.data.data.count
          this.listLoading = false
        })
      },
      remoteMethod(keyword) {
        if (this.deviceLoading) {
          return
        }
        if (keyword !== '') {
          this.deviceLoading = true
          setTimeout(() => {
            this.deviceLoading = false
            this.listDeviceQuery.number = keyword
            listDevice(this.listDeviceQuery).then(response => {
              this.deviceOptions = response.data.data.result
            })
          }, 200)
        } else {
          this.deviceOptions = []
        }
      },
      handleFilter() {
        this.listQuery.page = 0
        this.getList()
      },
      handleSizeChange(val) {
        this.listQuery.size = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val - 1
        this.getList()
      },
      showDetail(row) {
        this.$notify({
          title: '未完成',
          message: '功能完善中',
          type: 'info',
          duration: 2000
        })
      },
      showJsonObject(data) {
        this.jsonVisible = true
        this.jsonObject = JSON.stringify(data, null, 4)
      }
    }
  }
</script>

